<template>
  <div ref="lineBar" :style="{width:width,height:height}"></div>
</template>
<script>
export default {
  name: 'lineBar',
  data() {
    return {
      myChart:null,
      newBarData:[]
    }
  },
  props:{
    width:{
      type:String,
      default:""
    },
    height:{
      type:String,
      default:""
    },
    barName:{
      type:Array,
      default:()=> ['大一班', '大二班', '中一班', '中二班', '小一班', '小二班']
    },
    lineData:{
      type:Array,
      default:()=>[1,2,3,4,5,6]
    },
    barData:{
      type:Array,
      default:()=>[5,2,6,4,8,9]
    },
    seriesName:{
      type:Array,
      default:()=> ["步数","运动量"]
    },
    color:{
      type:Array,
      default:()=> ["#0CDF8A","#3EACE5"]
    },
    dataZoomShow:{
      type:Boolean,
      default:true
    },
  },
  watch:{
    barData:{
      handler(val){
        this.newBarData = val;
        this.getEchart();
      },
      deep:true
    }
  },
  mounted() {
  },

  methods: {
    getEchart() {
      if (
        //判断是否存在echarts实例化对象,如果存在则销毁
        this.myChart != null &&
        this.myChart != '' &&
        this.myChart != undefined
      ) {
        this.myChart.dispose()
      }
      this.myChart = this.$echarts.init(this.$refs.lineBar) //创建echarts实例化对象
      
      this.myChart.clear() //清空画布数据
      var categorySports = this.barName;
      var barDataSports = this.newBarData
      var lineDataSports = this.lineData

      // option
      let optionSports = {
        tooltip: {
          borderColor: 'transparent',
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.5)',
          axisPointer: {
            type: 'shadow',
            label: {
              show: true,
              backgroundColor: '#333'
            }
          },
          textStyle: {
            align: 'left',
            color: '#fff',
            fontSize: '12'
          }
        },
        legend: {
          data: this.seriesName,
          textStyle: {
            color: '#ccc'
          }
        },
        grid: {
          left: '14%',
          top: '13%',
          right: '13%',
          bottom: '10%'
        },
        xAxis: {
          data: categorySports,
          axisLine: {
            lineStyle: {
              color: '#666'
            }
          }
        },

        yAxis: [
          {
            name: this.seriesName[0],
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          },
          {
            name: this.seriesName[1],
            splitLine: {
              show: false
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          }
        ],
        dataZoom:[
          {
            show:this.dataZoomShow,
            type: 'slider',
            realtime: true,
            start: 0,
            end: categorySports.length >= 15 ?40:100,  // 初始展示40%
            height: 4,
            fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
            borderColor: "rgba(17, 100, 210, 0.12)", 
            handleSize:0, // 两边手柄尺寸
            showDetail: false, // 拖拽时是否展示滚动条两侧的文字
            top:'96%',
            
            // zoomLock:true, // 是否只平移不缩放
            // moveOnMouseMove:true, //鼠标移动能触发数据窗口平移
            // zoomOnMouseWheel :true, //鼠标移动能触发数据窗口缩放
          },
          // { 
          //   type: "inside",  // 支持内部鼠标滚动平移
          //   start: 0,
          //   end: 40,
          //   zoomOnMouseWheel: false,  // 关闭滚轮缩放
          //   moveOnMouseWheel: true, // 开启滚轮平移
          //   moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移 
          // }
        ],
        series: [
          {
            name: this.seriesName[0],
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              normal: {
                barBorderRadius: [5,5,0,0],
                color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: this.color[0]
                  },
                  {
                    offset: 1,
                    color: this.color[1]
                  }
                ])
              }
            },
            data: barDataSports
          },
          {
            name: this.seriesName[1],
            type: 'line',
            smooth: true,
            showAllSymbol: true,
            symbol: 'emptyCircle',
            symbolSize: 8,
            yAxisIndex: 1,
            itemStyle: {
              normal: {
                color: "#0BA6E3"
              }
            },
            data: lineDataSports
          }
        ]
      }
      this.myChart.setOption(optionSports);
      window.addEventListener("resize", ()=>{
        this.myChart.resize();
      })
    }
  }
}
</script>
<style scoped>
/* @import url(); 引入css类 */
</style>
